<template>
	<view @click="close" class="mask">
		<view class="w-box" @click.stop="onClick">
			<image class="w-box-img" :src="objdata.img"></image>
			<view class="w-con">
				<view class="w-con-t">
					<view>{{objdata.name}}</view>
					<view class="w-con-t-num">{{objdata.distance}}m</view>
				</view>
				<view class="w-con-c">{{objdata.address}}</view>
				<view class="w-con-b">
					<view class="w-con-b-l">设备数:{{objdata.num}}</view>
					<view class="w-con-b-r">
						<image class="icondt" src="/static/icon/icon-pho.png" @click="tophone(objdata.phone)"></image>
						<image class="icondt" src="/static/icon/icon-map.png" @click="address"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				objdata: {
					img: '/static/404.png',
					name: '益气健身房',
					address: '湖里区吕玲路211号',
					num: '19',
					phone: '17700084288',
					distance: '239'
				}
			}
		},
		onLoad(option) {
			console.log(222,option)
			if (option.objdata) {
				let resdata = JSON.parse(option.objdata)
				this.objdata = resdata;
			}
		},
		methods: {
			tophone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			address(){
				
			},
			onClick(e) {
				console.log(3,e);
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			close() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: flex-end;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.content {
		width: 200px;
		height: 200px;
		background-color: #007AFF;
	}

	/* 提示窗口2 */
	.w-box {
		display: flex;
		width: 90%;
		height: 230rpx;
		min-height: 230rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-box-color;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		color: #fff;
		margin-bottom: 130rpx;

		.w-con {
			width: calc(100% - 190rpx);
			display: flex;
			flex-direction: column;

			.w-con-t {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 60rpx;
				color: #fff;

				.w-con-t-num {
					font-size: 26rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: #ddd;
				}
			}

			.w-con-c {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: $font-color-d;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.w-con-b {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.w-con-b-l {
					font-size: 26rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: $font-color-d;
				}

				.w-con-b-r {
					display: flex;

					.icondt {
						margin-left: 50rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.w-box-img {
			width: 156rpx;
			height: 156rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 30rpx;
		}
	}
</style>
